<template>
    <div class="aside_box">
      <div class="fBox">
        <p class="current">冰箱</p>
        <div class="wrap">
            <div class="little_box" v-for="(item,index) in fridge" :key=index>{{item}}</div>
        </div>
      </div>
      <div class="fBox">
        <p class="current">冷柜</p>
        <div class="wrap">
            <div class="little_box" v-for="(item,index) in icebox" :key=index>{{item}}</div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data(){
    return{
      fridge:{},
      icebox:{}
    }
  },
  mounted(){
        this.$http.get('./data/products.json')
      .then((response)=> {
        this.fridge=response.data.fridge.slice(0,6);
        this.icebox=response.data.fridge.slice(6,8);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      });
      }
}
</script>
<style>
    .aside_box{
        width:70%;
        margin-right:10px;
        margin-left: 20px;
        height:100px;
        float:right;
        /* background:coral; */
        display: flex;
        flex-direction: column;
    }
    .fBox,.sBox{
        width: 100%;
        height: 200px;
        /* background: yellow; */
    }
    .current{
      width:100%;
      height:20px;
      margin-top:25px;
      font-size:11px;
      color:#0c5ca8;
    }
    .little_box{
      width:25%;
      margin:15px 20px 20px 0;
      text-align: left;
    }
    .wrap{
      display: flex;
      flex-wrap:wrap;
      /* background: pink; */
      font-size: 11px;
    }
</style>
